<template>
  <div>
    <div class="index_top">
      <div class="left">
        <div class="content">
          <div class="title">
            Dedicated to the design of LED lamp </div>
          <div class="brief">
            Founded in 1991 in Guangzhou, it has expanded in Dongguan, Hainan and other places. It has 6 large factories, more than 20,000 employees and 2 million square meters of modern factory buildings. The products are sold to more than 50 countries Founded in 1991 in Guangzhou, it has expanded in Dongguan, Hainan and other places. It has 6 large factories, more than 20,000 employees </div>
          <a
            class="btn"
            href="javascript:;"
            title="Dedicated to the design  of LED lamp"
          >
            <span class="btn_in">View all</span>
          </a>
        </div>
      </div>
      <div class="right i_video">
        <a
          class="img_a video_btn"
          href="javascript:;"
          video-url="https://qzonestyle.gtimg.cn/open/qcloud/video/flash/video_player.swf?swfv=beta1&amp;auto_play=0&amp;file_id=14651978969511250184&amp;app_id=1251369049&amp;version=1"
          title="Dedicated to the design  of LED lamp"
        >
          <img
            src="/u_file/t/t255/2003/photo/44951dddeb.jpg"
            alt="Dedicated to the design  of LED lamp"
          />
        </a>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data: () => ({})
}
</script>
<style lang="scss" scoped>
.index_top {
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    padding: 120px 0;
    width: 1440px;
}
.index_top .left {
    display: flex;
    align-items: center;
    width: 53.4722%;
}
.index_top .left .content {
    width: 100%;
}
.index_top .left .content .title {
    width: 100%;
    line-height: 64px;
    height: 128px;
    font-size: 48px;
    color: #333;
    font-family: Poppins-Regular;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.index_top .left .content .brief {
    margin-top: 26px;
    width: 100%;
    line-height: 40px;
    font-size: 16px;
    color: #555;
}
.index_top .left .content .btn {
    display: block;
    margin-top: 86px;
    width: 195px;
    height: 50px;
    background: #fde628;
    text-align: center;
}
a {
    color: #333;
    text-decoration: none;
}
.index_top .right {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 38.6806%;
}
.index_top .right .img_a {
    display: block;
    position: relative;
    overflow: hidden;
}
.index_top .right .img_a:before {
    display: block;
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 93px;
    height: 93px;
    border: 2px solid #fff;
    background: url(../images/play_icon.png) no-repeat center;
    z-index: 1;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
</style>